<template>
  <div>
    <div class="header">
      <span>答题总数</span>
      <i class="el-icon-warning"></i>
    </div>
    <div class="body" ref="myDiv"></div>

    <hr />
    <div class="footer">
      <span>日答题数量</span>
      <span>12123</span>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "Object",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    const myChart = echarts.init(this.$refs.myDiv); // 得到图表实例
    myChart.setOption({
      legend: {
        top: "bottom",
      },
      toolbox: {
        show: true,
        feature: {
          // mark: { show: true },
          // dataView: { show: true, readOnly: false },
          // restore: { show: true },
          // saveAsImage: { show: true },
        },
      },

      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [10, 40],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 5,
          },
          // data: data.list,
          data: [
            { value: 60, name: "前端" },
            { value: 58, name: "Python" },
            { value: 42, name: "ul" },
            { value: 30, name: "c++" },
            { value: 28, name: "java" },
          ],
        },
      ],
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  color: #97a8be;
  height: 25px;
  span {
    font-size: 14px;
  }
}
.body {
  font-size: 30px;
  height: 160px;
  line-height: 140px;
  padding-left: 20px;
}

hr {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 10px 0;
}
.footer span {
  margin-right: 8px;
}
</style>
